
import styles from '../css分支/Tuan.module.css'
import { Arrow, ArrowLeft, Close,ClockO } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Tabs, Search } from 'react-vant'
import axios from 'axios';
import React, { useEffect, useRef, useState } from 'react'
import { Card, Price, Tag } from '@nutui/nutui-react'
import { Checkbox, Cell } from '@nutui/nutui-react'
export default function Tuan() {
    const navigate = useNavigate()
    const items = ['进行中', '全部活动']
    const [list, setlist] = useState([])
    const getList = async () => {
        let res = await axios.get('http://localhost:3000/xzx/shop')
        setlist(res.data.data)
    }
    useEffect(() => {
        getList()
    }, [])
    const [pan,setpan] = useState(0)
    const handDian=(e)=>{
        setpan(e.name)
    }
    //开始和结束优惠
    const handTing=async(item)=>{
        let res = await axios.post('http://localhost:3000/xzx/group',{item})
        if(res.data.code==200){
            getList()
        }
    }
    return (
        <div className={styles.main}>
            <div className={styles.head}>
                <ArrowLeft style={{ marginLeft: '0.1rem' }} onClick={() => { navigate(-1) }} />
                <p style={{ fontSize: '0.22rem' }}>团购活动</p>
                <p style={{ marginRight: '0.1rem' }}></p>
            </div>
            <div className={styles.center}>
                <Tabs defaultActive={2} onClickTab={(e) => handDian(e)}>
                    {items.map(item => (
                        <Tabs.TabPane key={item} title={`${item}`}>
                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>
            {
                pan==0?list.map((item, index) => {
                    return (
                        item.isgroup&&<div className={styles.body1}>
                            <div className={styles.body1_head}>
                                <p>NO.112</p>
                                <div className={styles.head_right}>
                                    <ClockO  />
                                    <p>进行中</p>
                                </div>
                            </div>
                            <Card
                                style={{ margin: '0.3rem 0rem' }}
                                src={item.img}
                                title={item.name}
                                price={item.price}
                                description={
                                    <>
                                        <p style={{ fontSize: '0.15rem' }}>截止日期至2024-10-25|周五|免预约</p>
                                        <p style={{ fontSize: '0.15rem' }}>月售6</p>
                                    </>
                                }
                            />
                            <span style={{position:'absolute',color:'red',textDecoration:'line-through',bottom:'1.08rem',right:'1.5rem'}}>￥{item.price+2}.00</span>
                            <div className={styles.foot}>
                                <p onClick={()=>handTing(item)}>暂停优惠</p>
                            </div>
                        </div>
                    )
                })
            
                :list.map((item, index) => {                
                    return (
                        !item.isgroup&&<div className={styles.body1}>
                            <div className={styles.body1_head} >
                                <p>NO.112</p>
                                <div className={styles.head_right} style={{backgroundColor:'rgb(96, 189, 236)'}}>
                                    <ClockO  />
                                    <p>未开始</p>
                                </div>
                            </div>
                            <Card
                                style={{ margin: '0.3rem 0rem' }}
                                src={item.img}
                                title={item.name}
                                price={item.price}
                                description={
                                    <>
                                        <p style={{ fontSize: '0.15rem' }}>截止日期至2024-10-25|周五|免预约</p>
                                        <p style={{ fontSize: '0.15rem' }}>月售6</p>
                                    </>
                                }
                            />
                            <div className={styles.foot}>
                                <p onClick={()=>handTing(item)}>开始优惠</p>
                            </div>
                        </div>
                    )
                })
            }


        </div>
    )
}
